<template>
  <div id="app">
    <Header/>
    <MapContainer
        ref="mapRef"
        @mapClick="handleMapClick"
        @polygonCoordinatesUpdated="handlePolygonCoordinatesUpdated"
    />
    <LeftPanel 
        ref="leftPanelRef"
        @deletePolygonByName="handleDeletePolygonByName"
        @focusPolygonArea="handleFocusPolygonArea"
        @clearAllPolygons="handleClearAllPolygons"
        @renamePolygon="handleRenamePolygon"
        @visualizeGrids="handlerVisualizeGrids"
    />
    <Sidebar
        ref="sidebarRef"
        @clearMap="handleClearMap"
        @selectPointOnMap="handleSelectPointOnMap"
        @planRoute="handlePlanRoute"
    />
  </div>
</template>

<script>
import Header from './components/Header.vue';
import MapContainer from './components/MapContainer.vue';
import Sidebar from './components/Sidebar.vue';
import LeftPanel from './components/LeftPanel.vue';
import routeUtil from './utils/route.js'

export default {
  components: {Header, MapContainer, Sidebar, LeftPanel},
  data() {
    return {
      selectingPoint: null, // 当前选择点的类型
      selectingPointIndex: null // 当前选择点的索引（用于途径点）
    };
  },
  provide() {
    return {
      mapInstance: this.mapInstance
    };
  },
  methods: {
    // 接收侧边栏的重置事件，通知地图清除标记
    handleClearMap() {
      this.$refs.mapRef.mapInstance.clearLayer('markerLayer');
    },
    // 处理侧边栏的地图选点请求
    handleSelectPointOnMap(payload) {
      this.selectingPoint = payload.type;
      this.selectingPointIndex = payload.index;
      // 通知地图组件进入选点模式
      if (this.$refs.mapRef && this.$refs.mapRef.enablePointSelection) {
        this.$refs.mapRef.enablePointSelection();
      }
    },
    // 处理地图点击事件
    handleMapClick(coordinate) {
      if (this.selectingPoint) {
        // 将坐标格式化为字符串
        const coordinateStr = `${coordinate.lng.toFixed(6)},${coordinate.lat.toFixed(6)}`;
        // 将坐标传递给侧边栏组件
        if (this.$refs.sidebarRef && this.$refs.sidebarRef.setCoordinate) {
          this.$refs.sidebarRef.setCoordinate(this.selectingPoint, this.selectingPointIndex, coordinateStr);
        }
        // 重置选点状态
        this.selectingPoint = null;
        this.selectingPointIndex = null;
        // 通知地图组件退出选点模式
        if (this.$refs.mapRef && this.$refs.mapRef.disablePointSelection) {
          this.$refs.mapRef.disablePointSelection();
        }
      }
    },
    // 处理侧边栏的规划路线请求
    handlePlanRoute(routeParams) {
      routeUtil.route(routeParams,this.$refs.mapRef.mapInstance)
    },
    // 处理多边形坐标更新
    handlePolygonCoordinatesUpdated(coordinates) {
      this.$refs.leftPanelRef.setCoordinates(coordinates);
    },
    // 处理重命名多边形请求
    handleRenamePolygon(oldName, newName) {
      // 调用地图组件重命名多边形
      this.$refs.mapRef.renamePolygon(oldName, newName);
    },
    // 处理删除多边形请求
    handleDeletePolygonByName(name) {
      // 调用地图组件删除多边形
      this.$refs.mapRef.removePolygonByName(name);
    },
    // 处理聚焦多边形区域请求
    handleFocusPolygonArea(coordinates) {
      // 调用地图组件聚焦多边形区域
      this.$refs.mapRef.focusPolygonArea(coordinates);
    },
    // 处理清除所有多边形请求
    handleClearAllPolygons() {
      // 调用地图组件清除所有多边形
      this.$refs.mapRef.clearPolygons();
    },
    // 处理网格可视化
    handlerVisualizeGrids(h3Indexes){
      // 转发给 MapContainer 组件
      this.$refs.mapRef.drawGridsOnMap(h3Indexes);
    }
  }
};
</script>

<style scoped>
#app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
</style>
